<template>
  <div style="background-color: rgb(243, 243, 243)">
    <van-nav-bar title="抢购页面面" left-text="" left-arrow @click-left="onClickLeft" />
    <!-- price="2.00" num="2"-->
    <van-card :title="tegration.PackageName" :thumb="tegration.Packageimg" price-top>
      <template #tags>
        <van-tag plain type="primary" style="font-size: 13px; margin-top: 16px">周一周至五</van-tag><br />
        <van-tag plain type="primary" style="margin-top: 6px; font-size: 13px">免预约 | 临时退 | 过期自动退</van-tag>
        <span class="price" style="margin-left: 55px">￥{{ price }}</span>
      </template>
    </van-card>
    <div class="num">
      <span>数量</span>
      <van-stepper v-model="num" theme="round" button-size="22" disable-input @change="changenum" />
    </div>
    <div class="num">
      <span>小计</span>
      <span style="color: orange">￥{{ `${prices}` }}</span>
    </div>
    <!-- <div class="num" style="margin-top: 10px">
      <van-cell
        is-link
        title="抵用券"
        @click="show1 = true"
        style="font-size: 16px"
      />
      <van-action-sheet
        v-model:show="show1"
        :actions="actions"
        @select="onSelect"
      />
    </div> -->
    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
    <!-- 优惠券列表 -->
    <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px">
      <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" @change="onChange" @exchange="onExchange" />
    </van-popup>

    <div class="num">
      <span>实付金额</span>
      <span style="color: orange">￥{{ `${prices}` }}</span>
    </div>
    <div class="num" style="margin-top: 10px">
      <span>手机号</span>
      <span>158***8754</span>
    </div>
    <van-button style="margin-top: 137px" icon-position="right" type="warning" size="large" @click="showPopup">￥{{
        prices
    }}立即付款</van-button>
    <van-popup v-model:show="show" closeable close-icon-position="top-left" position="bottom"
      :style="{ height: '424px' }">
      <div class="box1">确认付款</div>
      <div class="box2">￥{{ `${prices}` }}</div>
      <div class="box3">
        <li>订单信息</li>
        <li>小鲍糕点站1人独享套餐</li>
      </div>
      <div class="box4">
        <li>付款方式</li>
        <li>余额宝</li>
      </div>
      <div class="box5">
        <li>花呗最高立减十元</li>
        <li>立即使用</li>
      </div>
      <div class="box6">
        <van-button style="width: 95%; margin-top: 110px" icon-position="right" type="warning" size="large">￥{{ prices
        }}确认付款</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getIntegration, getChangeNum, getCount } from "@/api/api";
import useZBStore from "@/pinia/index";
import { useRoute } from "vue-router";
const route = useRoute();
const id = route.query.id;

console.log("套餐id----------" + id); //获取店铺id

//获取用户id
const ZBStore = useZBStore();
let usId = ZBStore.uId
console.log(usId);

// 1.获取套餐信息
const tegration = ref([]);
const price = ref(0); //单价
const num = ref(1); //数量
const prices = ref(); //总价
onMounted(async () => {
  let { data } = await getIntegration({ uid: '1', packageId: id })
  tegration.value = data[0];
  console.log(data);
  let arr1 = tegration.value.info.filter((item, index) => index < 3);
  price.value = arr1.reduce((prev, item) => {
    return prev + item.price;
  }, 0);
  prices.value = price.value * num.value;
  let res = await getCount({ userid: '24' })
  num.value = res.data[0].count
});
//点击加加减减按钮执行此函数
const changenum = async () => {
  let { data } = await getChangeNum({ userid: '24', count: num.value })
  console.log(data);
  prices.value = price.value * num.value;
  prices.value = prices.value.toFixed(2);
  console.log(num.value);
};

//默认样式方法
const onClickLeft = () => history.back();
const show = ref(false);
const showPopup = () => {
  show.value = true;
};

//优惠券逻辑代码
const coupon = {
  available: 1,
  condition: "无门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};

const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);
let flag = ref(true);
const onChange = (index) => {
  console.log(index);
  showList.value = false;
  chosenCoupon.value = index;
  if (index == 0) {
    if (flag.value == false) return;
    flag.value = false;
    prices.value = prices.value - coupon.valueDesc;
  } else if (index == -1) {
    flag.value = true;
    prices.value = price.value * num.value;
  }
  console.log("777");
};
const onExchange = (code) => {
  console.log("666");

  coupons.value.push(coupon);
};
</script>

<style lang="scss" scoped>
.van-coupon-cell {
  margin-top: 20px;
  height: 90px;
}

li {
  list-style: none;
}

.van-tag--plain:before {
  border: 0;
  color: gray;
}

.van-tag--primary.van-tag--plain {
  color: gray;
}

.van-card {
  background-color: white;
  margin-top: -1px;
  position: relative;
}

.price {
  margin-left: 55px;
  position: absolute;
  top: 30px;
}

.num {
  background-color: white;
  border-top: 2px solid rgb(243, 243, 243);
  height: 70px;
  line-height: 70px;
  display: flex;
  justify-content: space-between;
  padding: 30px;
}

.num span {
  font-size: 30px;
}

.van-popup div {
  justify-content: space-between;
  padding: 20px;
}

.van-popup {
  text-align: center;
}

.van-popup .box1 {
  height: 60px;
  text-align: center;
  line-height: 60px;
}

.van-popup .box2 {
  font-size: 80px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  border-top: 1px solid gray;
  padding: 20px;
}

.van-popup .box3 {
  border-bottom: 1px solid gainsboro;
  display: flex;
  font-size: 30px;
  height: 42px;
  line-height: 42px;
}

.van-popup .box4 {
  display: flex;
  border-bottom: 1px solid gainsboro;
  font-size: 30px;
  height: 42px;
  line-height: 42px;
}

.van-popup .box5 {
  display: flex;
  font-size: 30px;
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid gainsboro;
}

.van-popup .box5 li:nth-child(2) {
  border: 1px solid gray;
  font-size: 12px;
  color: gray;
}

.van-popup .box5 li:nth-child(1) {
  font-weight: 600;
}

.van-popup .box3 li:nth-child(2) {
  font-weight: 600;
}

.van-popup .box4 li:nth-child(2) {
  font-weight: 600;
}

.van-popup .box6 {
  text-align: center;
}
</style>